<!DOCTYPE html>
<html>

<head>
    <title>审核模版</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Cache-Control" content="only-if-cached">
    <style>
        pre {
            white-space: pre-wrap;
            /* CSS-3 /
           white-space: -moz-pre-wrap; / Mozilla, since 1999 /
           white-space: -pre-wrap; / Opera 4-6 /
           white-space: -o-pre-wrap; / Opera 7 /
           Word-wrap: break-word; / Internet Explorer 5.5+ */
        }

        .textarea {
            width: 100%;
            min-height: 30px;
            max-height: 700px;
            outline: 0;
            border: 1px solid #000;
            font-size: 16px;
            overflow-x: hidden;
            overflow-y: auto;
            -webkit-user-modify: read-write-plaintext-only;
        }

        [contentEditable=true]:empty:not(:focus):before {
            content: attr(data-text);
        }
    </style>

    <script type="text/javascript" src="vue2.7.js"></script>
    <link href="bootstrap5.1.1.css" rel="stylesheet">
    <script src="bootstrap5.1.1.js"></script>
    <script type="text/javascript" src="config.js"></script>

</head>

<body>
    <div id="app">
        <div class="bg-light" style="padding: 6px;">
            <h4 class="text-black text-center" style="align-content: center">{{title}}</h4>
            <div
                style="display: flex;flex-direction: row;justify-content: center;text-align: center; line-height: 48px">
                <button type="button" class="btn btn-info" style="margin-top: 30px;margin-left: 50px" @click="useDoc1">
                    审核章模版
                </button>
                <button type="button" class="btn btn-info" style="margin-top: 30px;margin-left: 50px" @click="useDoc2">
                    审核节模版
                </button>
                <button type="button" class="btn btn-info" style="margin-top: 30px;margin-left: 50px" @click="useDoc3">
                    审核小节模版
                </button>
            </div>

            <div style="display: flex;padding-top: 55px;text-align: left">
                <div style="width: 50%">
                    <div class="bg-light" style="border-radius:25px;padding: 1.5% 3% 1.5% 3%">
                        <ul class="list-group" style="list-style: none;margin-top:0;padding:0%;">

                            <ul v-if="maxPage>1" class="pagination justify-content-center" style="margin-bottom:10px">
                                <li v-if="curPage>1" class="page-item" @click="fetchData(1)"><a class="page-link"
                                        href="#">首页</a></li>
                                <li v-if="curPage>1" class="page-item" @click="fetchData(curPage-1)">
                                    <a class="page-link" href="#"><span>&laquo;</span></a>
                                </li>

                                <li v-if="curPage>2" class="page-item" @click="fetchData(curPage-2)"><a
                                        class="page-link" href="#">{{curPage-2}}</a>
                                </li>
                                <li v-if="curPage>1" class="page-item" @click="fetchData(curPage-1)"><a
                                        class="page-link" href="#">{{curPage-1}}</a>
                                </li>

                                <li class="page-item active"><a class="page-link" href="#">{{curPage}}</a></li>

                                <li v-if="curPage<maxPage" class="page-item" @click="fetchData(curPage+1)"><a
                                        class="page-link" href="#">{{curPage+1}}</a></li>
                                <li v-if="curPage<(maxPage-1)" class="page-item" @click="fetchData(curPage+2)"><a
                                        class="page-link" href="#">{{curPage+2}}</a></li>

                                <li v-if="curPage<maxPage" class="page-item" @click="fetchData(curPage+1)">
                                    <a class="page-link" href="#"><span>&raquo;</span></a>
                                </li>
                                <li v-if="curPage<maxPage" class="page-item" @click="fetchData(maxPage)">
                                    <a class="page-link" href="#">尾页</a>
                                </li>
                            </ul>

                            <li v-for="obj in models" style="margin-top: 1.5%;margin-bottom: 1.5%;padding:0">
                                <div class="card" style="border-radius:25px;padding: 16px;background: white">
                                    <div style="display: flex;flex-direction: row;align-items: center;" v-if="obj">

                                        <div style="display: flex;flex-direction: column;width: 75%">
                                            <span
                                                style="font-size: 22px;color:black;font-weight: 400;line-height: 23px;">
                                                {{ obj?.title ?? '' }}
                                            </span>

                                            <div style="display: flex;">
                                                <span
                                                    style="font-size: 16px;color:orange;font-weight: 300;margin-top: 4px;">
                                                    {{ formatType(obj.subjectType) }}
                                                </span>

                                                <span v-if="obj.pass"
                                                    style="border: 1px solid #17af66;padding: 0px 5px;font-size: 12px;border-radius: 5px;margin-left: 10px;color: #17af66;height: 20px;margin-top: 6px;">已通过</span>
                                                    <span v-else-if="!!(obj.audit)"
                                                    style="border: 1px solid #f00;padding: 0px 5px;font-size: 12px;border-radius: 5px;margin-left: 10px;color: #f00;height: 20px;margin-top: 6px;">不通过</span>
                                                    <span v-else
                                                    style="border: 1px solid #ffaa00;padding: 0px 5px;font-size: 12px;border-radius: 5px;margin-left: 10px;color: #ffaa00;height: 20px;margin-top: 6px;">未审核</span>
                                            </div>

                                            <span v-if="obj.audit"
                                                style="border: 1px solid #f00;padding: 0px 5px;font-size: 12px;border-radius: 5px;margin-left: 0px;color: #f00;height: 20px;margin-top: 5px;">{{'评审意见:'
                                                + obj.audit}}</span>
                                            <div style="display: flex;">
                                                <span style="font-size: 16px;color:#555;font-weight: 300;">
                                                    {{ obj.author +" " + formatDate(obj.timeMills) }}
                                                </span>
                                            </div>

                                            <span style="background-color: #eee;margin-top: 5px">
                                                {{ obj.content.substring(0,38) }}
                                            </span>
                                        </div>

                                        <button type="button" class="btn btn-primary btn-block btn-sm"
                                            @click="configModel(obj)"
                                            style="width: 11%; border-radius: 15px; margin: 15px 2% 15px 2%">
                                            预览
                                        </button>

                                        <button v-if="!obj.pass" type="button" class="btn btn-success btn-block btn-sm"
                                            style="width: 11%; border-radius: 15px; margin-right: 15px;"
                                            @click="passVerify(obj)">
                                            通过
                                        </button>
                                        <button v-else type="button" class="btn btn-danger btn-block btn-sm"
                                            style="width: 11%; border-radius: 15px;" @click="passVerify(obj)">
                                            不通过
                                        </button>

                                    </div>

                                </div>

                            </li>
                        </ul>
                    </div>
                </div>

                <div style="width: 50%">
                    <div class="card border-info bg-light"
                        style="border-radius:25px;padding: 3% 3% 3% 3%;max-width: 900px">
                        <span
                            style="font-size: 22px;color:black;font-weight: 400;line-height: 23px;margin-bottom: 20px">
                            模版详情
                        </span>
                        <div id="form">
                            <span style="font-size: 22px;color:black;font-weight: 400;line-height: 23px;">
                                {{ previewObj?.title }}
                            </span>

                            <span style="font-size: 16px;color:orange;font-weight: 300;margin-top: 4px;">
                                {{ formatType(previewObj?.subjectType) }}
                            </span>

                            <div style="display: flex;">
                                <span style="font-size: 16px;color:#555;font-weight: 300;">
                                    {{ previewObj ? previewObj?.author +" " + formatDate(previewObj?.timeMills) : ""}}
                                </span>
                            </div>

                            <pre style="background-color: #ddd;margin-top: 5px">
                                {{ "\n"+ (previewObj?.content || "")}}
                            </pre>

                            <div v-if="!!previewObj && !previewObj?.pass" style="display: flex;flex-direction: column;">
                                <span style="font-size: 16px;color:#f00;font-weight: 400;line-height: 23px;">
                                    审核意见：
                                </span>
                                <input v-model="auditContent" type="text" style="flex: 1;margin-bottom: 20px;
                                font-size: 16px;padding: 5px;">
                                <button type="button" class="btn btn-success justify-content-end"
                                    @click="commitAudit(previewObj)">提交审核意见</button>
                            </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <script text="javascript">
        var tokenInfo = localStorage.getItem('tokenInfo')
        if (tokenInfo) {
            var params = JSON.parse(tokenInfo)
            if (!params.admin) {
                alert("需要管理员权限")
                let divElement = document.getElementById("app");
                divElement.style.display = "none";
            }
        } else {
            localStorage.setItem('tokenInfo', '')
            alert("登陆过期，请登陆后再试")
            let divElement = document.getElementById("app");
            divElement.style.display = "none";
            window.open('./login.html')
        }

        function formatType(type) {
            // console.log('formatType', type);
            let ret = '';
            // 建筑 市政 水利 公路
            let shiftNum = type >> 3;
            if (shiftNum & 1) {
                ret += '建筑 ';
            }
            shiftNum = type >> 2;
            if (shiftNum & 1) {
                ret += '市政 ';
            }
            shiftNum = type >> 1;
            if (shiftNum & 1) {
                ret += '水利 ';
            }
            shiftNum = type >> 0;
            if (shiftNum & 1) {
                ret += '公路';
            }
            return ret;
        }

        var app = new Vue({
            el: "#app",
            data: {
                title: "审核章模版",
                models: [],
                retLi: [],
                selected: 0,
                curPage: 0,
                maxPage: 0,
                previewObj: null,
                path: '/doc1',
                dataType: 1
            },
            computed: {
                auditContent: {
                    get() {
                        if (!!this.previewObj && this.previewObj.audit) {
                            return this.previewObj.audit
                        } else {
                            return '';
                        }
                    },
                    set(value) {
                        this.previewObj.auditTmp = value
                    }
                }
            },
            methods: {
                useDoc1: function (page) {
                    this.useDocInner('审核章模版', '/doc1', 1, page)
                },
                useDoc2: function (page) {
                    this.useDocInner('审核节模版', '/doc2', 2, page)
                },
                useDoc3: function (page) {
                    this.useDocInner('审核小节模版', '/doc3', 3, page)
                },
                useDocInner: function (title, path, dataType, page) {
                    resetEdit()
                    this.title = title
                    this.path = path
                    this.dataType = dataType
                    this.fetchData();
                },

                fetchData: function (page) {
                    let url = new URL(baseUrl + this.path);
                    url.searchParams.append('username', params.username);
                    url.searchParams.append('token', params.token);
                    if (page) {
                        url.searchParams.append('page', page);
                    }
                    fetch(url.toString())
                        .then(response => response.json())
                        .then(res => {
                            if (res.code === 200) {
                                this.models = res.res;
                                this.curPage = parseInt(res.curPage);
                                this.maxPage = parseInt(res.maxPage);
                                console.log("fetch done: " + res)
                            } else {
                                console.log("fetch err: " + res.code)
                            }
                        })
                        .catch(error => console.error(error));
                },
                commitAudit: function (configObj) {
                    if (!configObj) {
                        alert("请先选中模版")
                        return
                    }
                    if (tokenInfo) {
                        let params = JSON.parse(tokenInfo)
                        let obj = {
                            ...params,
                            _id: configObj._id,
                        }
                        obj.dataType = this.dataType
                        obj.audit = configObj.auditTmp
                        console.log("commitAudit: " + obj.audit )
                        let url = new URL(baseUrl + '/audit');
                        const request = new Request(url.toString(), {
                            method: 'POST',
                            headers: {
                                'Content-Type': 'application/json',
                            },
                            body: JSON.stringify(obj),
                        });

                        fetch(request)
                            .then(response => response.json())
                            .then(res => {
                                if (res.code === 200) {
                                    console.log("success: " + res._id)
                                    alert("提交audit成功")
                                    this.previewObj.audit = obj.audit
                                    this.previewObj = null
                                } else {
                                    console.log("audit err: " + res.code)
                                }
                            })
                            .catch(error => console.error(error));
                    }
                },
                configModel: function (obj) {
                    this.previewObj = obj;
                },
                verifyTxt: function (pass) {
                    return pass ? '不通过' : '通过'
                }
            },
        })

        var inputSum = 1;

        function addContent() {
            // 创建新的内容输入框
            var input = document.createElement("div");
            input.className = "textarea"
            input.contenteditable = "true";
            // input.data-text = "输入内容";
            inputSum += 1
            input.id = "input" + inputSum

            // 找到按钮元素和它的父元素
            var btn = document.getElementById("dbtn");
            var form = document.getElementById("form");
            var span = document.createElement("span");
            span.style.color = "olivedrab"
            span.innerHTML = "内容模版" + inputSum
            span.id = "span" + inputSum

            // <span>内容模版1:</span><br>
            // 在按钮上方插入新的输入框
            form.appendChild(span);
            form.appendChild(input);
        }

        function resetEdit() {
            previewObj = {};
        }

        function passVerify(obj) {
            console.log("passVerify dataType: " + app.dataType)
            let pass = !obj.pass;

            var tokenInfo = localStorage.getItem('tokenInfo')
            var postJson = {}
            if (tokenInfo) {
                var params = JSON.parse(tokenInfo)
                postJson.username = params.username
                if (params.username === "admin") {
                    postJson.token = params.token
                }
            }
            if (!postJson.token) {
                console.log("passVerify err: no token ")
                return
            }
            postJson.pass = !obj.pass
            postJson._id = obj._id
            var docmodel = ""
            switch (app.dataType) {
                case 1:
                    docmodel = "/verifyDoc1"
                    break;
                case 2:
                    docmodel = "/verifyDoc2"
                    break;
                case 3:
                    docmodel = "/verifyDoc3"
                    break;
            }
            const json = JSON.stringify(postJson)
            const xhr = new XMLHttpRequest()
            xhr.open('POST', baseUrl + docmodel)
            xhr.setRequestHeader('Content-Type', 'application/json')
            xhr.onload = async function () {
                var res = JSON.parse(xhr.response);
                console.log(res)
                if (res.code === 200) {
                    obj.pass = !obj.pass
                    alert("操作成功")
                }
            }
            xhr.send(json)
        }

        function formatDate(milliseconds) {
            if (!milliseconds) {
                return '';
            }
            var date = new Date(parseInt(milliseconds));
            var year = date.getFullYear();
            var month = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minutes = date.getMinutes();
            var seconds = date.getSeconds();
            return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
        }

        document.addEventListener("DOMContentLoaded", function () {
            console.log('loading...')
            app.useDoc1();
        });
    </script>

</body>

</html>